<!DOCTYPE html>
<html>
<head>

    <!--
    noVNC example: lightweight example using minimal UI and features
    Copyright (C) 2012 Joel Martin
    Copyright (C) 2013 Samuel Mannehed for Cendio AB
    noVNC is licensed under the MPL 2.0 (see LICENSE.txt)
    This file is licensed under the 2-Clause BSD license (see LICENSE.txt).

    Connect parameters are provided in query string:
        http://example.com/?host=HOST&port=PORT&encrypt=1
    or the fragment:
        http://example.com/#host=HOST&port=PORT&encrypt=1
    -->
    <title>noVNC</title>

    <meta charset="utf-8">

    <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
                Remove this if you use the .htaccess -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <!-- Icons (see Makefile for what the sizes are for) -->
    <link rel="icon" sizes="16x16" type="image/png" href="{{ url_for('static', filename='novnc/app/images/icons/novnc-16x16.png') }}">
    <link rel="icon" sizes="24x24" type="image/png" href="{{ url_for('static', filename='novnc/app/images/icons/novnc-24x24.png') }}">
    <link rel="icon" sizes="32x32" type="image/png" href="{{ url_for('static', filename='novnc/app/images/icons/novnc-32x32.png') }}">
    <link rel="icon" sizes="48x48" type="image/png" href="{{ url_for('static', filename='novnc/app/images/icons/novnc-48x48.png') }}">
    <link rel="icon" sizes="60x60" type="image/png" href="{{ url_for('static', filename='novnc/app/images/icons/novnc-60x60.png') }}">
    <link rel="icon" sizes="64x64" type="image/png" href="{{ url_for('static', filename='novnc/app/images/icons/novnc-64x64.png') }}">
    <link rel="icon" sizes="72x72" type="image/png" href="{{ url_for('static', filename='novnc/app/images/icons/novnc-72x72.png') }}">
    <link rel="icon" sizes="76x76" type="image/png" href="{{ url_for('static', filename='novnc/app/images/icons/novnc-76x76.png') }}">
    <link rel="icon" sizes="96x96" type="image/png" href="{{ url_for('static', filename='novnc/app/images/icons/novnc-96x96.png') }}">
    <link rel="icon" sizes="120x120" type="image/png" href="{{ url_for('static', filename='novnc/app/images/icons/novnc-120x120.png') }}">
    <link rel="icon" sizes="144x144" type="image/png" href="{{ url_for('static', filename='novnc/app/images/icons/novnc-144x144.png') }}">
    <link rel="icon" sizes="152x152" type="image/png" href="{{ url_for('static', filename='novnc/app/images/icons/novnc-152x152.png') }}">
    <link rel="icon" sizes="192x192" type="image/png" href="{{ url_for('static', filename='novnc/app/images/icons/novnc-192x192.png') }}">
    <link rel="icon" sizes="any" type="image/svg+xml" href="{{ url_for('static', filename='novnc/app/images/icons/novnc-icon.svg') }}">
    <!-- Repeated last so that legacy handling will pick this -->
    <link rel="icon" sizes="16x16" type="image/png" href="{{ url_for('static', filename='novnc/app/images/icons/novnc-16x16.png') }}">

    <!-- Apple iOS Safari settings -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <!-- Home Screen Icons (favourites and bookmarks use the normal icons) -->
    <link rel="apple-touch-icon" sizes="60x60" type="image/png" href="{{ url_for('static', filename='novnc/app/images/icons/novnc-60x60.png') }}">
    <link rel="apple-touch-icon" sizes="76x76" type="image/png" href="{{ url_for('static', filename='novnc/app/images/icons/novnc-76x76.png') }}">
    <link rel="apple-touch-icon" sizes="120x120" type="image/png" href="{{ url_for('static', filename='novnc/app/images/icons/novnc-120x120.png') }}">
    <link rel="apple-touch-icon" sizes="152x152" type="image/png" href="{{ url_for('static', filename='novnc/app/images/icons/novnc-152x152.png') }}">

    <!-- Stylesheets -->
    <link rel="stylesheet" href="{{ url_for('static', filename='novnc/app/styles/lite.css') }}">

     <!--
    <script type='text/javascript'
        src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>
    -->

    <!-- promise polyfills promises for IE11 -->
    <script src="{{ url_for('static', filename='novnc/vendor/promise.js') }}"></script>
    <!--<script src="{{ url_for('static', filename='novnc/vendor/browser-es-module-loader/dist/browser-es-module-loader.js') }}"></script>-->
    <script type="module">
        // Load supporting scripts
        import * as WebUtil from "{{ url_for('static', filename='novnc/app/webutil.js') }}";
        import RFB from "{{ url_for('static', filename='novnc/core/rfb.js') }}";

        var rfb;
        var resizeTimeout;
        var desktopName;

        function UIresize() {
            if (WebUtil.getConfigVar('resize', false)) {
                var innerW = window.innerWidth;
                var innerH = window.innerHeight;
                var controlbarH = document.getElementById('noVNC_status_bar').offsetHeight;
                if (innerW !== undefined && innerH !== undefined)
                    rfb.requestDesktopSize(innerW, innerH - controlbarH);
            }
        }
        function FBUComplete(rfb, fbu) {
            UIresize();
            rfb.set_onFBUComplete(function() { });
        }
        function updateDesktopName(rfb, name) {
            desktopName = name;
        }
        function passwordRequired(rfb, msg) {
            if (typeof msg === 'undefined') {
                msg = 'Password Required: ';
            }
            var html;

            var form = document.createElement('form');
            form.style = 'margin-bottom: 0px';
            form.innerHTML = '<label></label>'
            form.innerHTML += '<input type=password size=10 id="password_input" class="noVNC_status">';
            form.onsubmit = setPassword;

            // bypass status() because it sets text content
            document.getElementById('noVNC_status_bar').setAttribute("class", "noVNC_status_warn");
            document.getElementById('noVNC_status').innerHTML = '';
            document.getElementById('noVNC_status').appendChild(form);
            document.getElementById('noVNC_status').querySelector('label').textContent = msg;
        }
        function setPassword() {
            rfb.sendPassword(document.getElementById('password_input').value);
            return false;
        }
        function sendCtrlAltDel() {
            rfb.sendCtrlAltDel();
            return false;
        }
        function xvpShutdown() {
            rfb.xvpShutdown();
            return false;
        }
        function xvpReboot() {
            rfb.xvpReboot();
            return false;
        }
        function xvpReset() {
            rfb.xvpReset();
            return false;
        }
        function status(text, level) {
            switch (level) {
                case 'normal':
                case 'warn':
                case 'error':
                    break;
                default:
                    level = "warn";
            }
            document.getElementById('noVNC_status_bar').setAttribute("class", "noVNC_status_" + level);
            document.getElementById('noVNC_status').textContent = text;
        }
        function updateState(rfb, state, oldstate) {
            var cad = document.getElementById('sendCtrlAltDelButton');
            switch (state) {
                case 'connecting':
                    status("Connecting", "normal");
                    break;
                case 'connected':
                    if (rfb && rfb.get_encrypt()) {
                        status("Connected (encrypted) to " +
                               desktopName, "normal");
                    } else {
                        status("Connected (unencrypted) to " +
                               desktopName, "normal");
                    }
                    break;
                case 'disconnecting':
                    status("Disconnecting", "normal");
                    break;
                case 'disconnected':
                    status("Disconnected", "normal");
                    break;
                default:
                    status(state, "warn");
                    break;
            }

            if (state === 'connected') {
                cad.disabled = false;
            } else {
                cad.disabled = true;
                xvpInit(0);
            }

        }
        function disconnected(rfb, reason) {
            if (typeof(reason) !== 'undefined') {
                status(reason, "error");
            }
        }
        function notification(rfb, msg, level, options) {
            status(msg, level);
        }

        window.onresize = function () {
            // When the window has been resized, wait until the size remains
            // the same for 0.5 seconds before sending the request for changing
            // the resolution of the session
            clearTimeout(resizeTimeout);
            resizeTimeout = setTimeout(function(){
                UIresize();
            }, 500);
        };

        function xvpInit(ver) {
            var xvpbuttons;
            xvpbuttons = document.getElementById('noVNC_xvp_buttons');
            if (ver >= 1) {
                xvpbuttons.style.display = 'inline';
            } else {
                xvpbuttons.style.display = 'none';
            }
        }

        document.getElementById('sendCtrlAltDelButton').style.display = "inline";
        document.getElementById('sendCtrlAltDelButton').onclick = sendCtrlAltDel;
        document.getElementById('xvpShutdownButton').onclick = xvpShutdown;
        document.getElementById('xvpRebootButton').onclick = xvpReboot;
        document.getElementById('xvpResetButton').onclick = xvpReset;

        WebUtil.init_logging(WebUtil.getConfigVar('logging', 'warn'));
        document.title = WebUtil.getConfigVar('title', 'noVNC');
        // By default, use the host and port of server that served this file
        var host = WebUtil.getConfigVar('host', window.location.hostname);

        var password = WebUtil.getConfigVar('password', '');
        var path = WebUtil.getConfigVar('path', 'websockify');

        // If a token variable is passed in, set the parameter in a cookie.
        // This is used by nova-novncproxy.
        var token = WebUtil.getConfigVar('token', null);
        if (token) {
            // if token is already present in the path we should use it
            path = WebUtil.injectParamIfMissing(path, "token", token);

            WebUtil.createCookie('token', token, 1)
        }

        (function() {

            if ((!host)) {
                status('Must specify host and in URL', 'error');
            }

            try {
                rfb = new RFB({'target':       document.getElementById('noVNC_canvas'),
                               'encrypt':      WebUtil.getConfigVar('encrypt',
                                        (window.location.protocol === "https:")),
                               'repeaterID':   WebUtil.getConfigVar('repeaterID', ''),
                               'local_cursor': WebUtil.getConfigVar('cursor', true),
                               'shared':       WebUtil.getConfigVar('shared', true),
                               'view_only':    WebUtil.getConfigVar('view_only', false),
                               'onNotification':  notification,
                               'onUpdateState':  updateState,
                               'onDisconnected': disconnected,
                               'onXvpInit':    xvpInit,
                               'onPasswordRequired':  passwordRequired,
                               'onFBUComplete': FBUComplete,
                               'onDesktopName': updateDesktopName});
            } catch (exc) {
                status('Unable to create RFB client -- ' + exc, 'error');
                return; // don't continue trying to connect
            }

            rfb.connect(host, {{ port }}, "{{ password }}", path);
        })();
    </script>
</head>

<body style="margin: 0px;">
    <div id="noVNC_container">
            <div id="noVNC_status_bar" class="noVNC_status_bar" style="margin-top: 0px;">
                <table border=0 width="100%"><tr>
                    <td><div id="noVNC_status" style="position: relative; height: auto;">
                        Loading
                    </div></td>
                    <td width="1%"><div id="noVNC_buttons">
                        <input type=button value="Send CtrlAltDel"
                            id="sendCtrlAltDelButton">
                        <span id="noVNC_xvp_buttons">
                        <input type=button value="Shutdown"
                            id="xvpShutdownButton">
                        <input type=button value="Reboot"
                            id="xvpRebootButton">
                        <input type=button value="Reset"
                            id="xvpResetButton">
                        </span>
                            </div></td>
                </tr></table>
            </div>
            <canvas id="noVNC_canvas" width="640px" height="20px">
                Canvas not supported.
            </canvas>
        </div>

    </body>
</html>
